import { ScrollView, View } from "@tarojs/components";

import Title from "@/components/Title";
import { getLeaguesApi } from "@/api";
import { Ellipsis } from "@taroify/icons";
import { useLoad } from "@tarojs/taro";
import { useState } from "react";
import { listType } from "@/types";

type leagueType = {
  id: string;
  league_cn_name: string;
  league_en_name: string;
};

export default function Index() {
  const [leagues, setLeagues] = useState<Array<leagueType>>([]);
  const pager = { page: 0, limit: 10 };
  function getLeagues() {
    pager.page++;
    getLeaguesApi(pager).then((res: listType<leagueType>) => {
      setLeagues([...leagues, ...res.rows]);
    });
  }
  useLoad(() => {
    getLeagues();
  });
  return (
    <View className="bg-[#F6F7FB]">
      <Title title="主页" right={<Ellipsis />} />
      <View className="mt-12 text-xs px-3">
        <View className="h-40"> </View>
        <View className="">
          <View className="flex justify-between items-center">
            <View className="text-lg font-semibold">联赛</View>
            <View>更多</View>
          </View>
          <ScrollView
            className=" whitespace-nowrap "
            scrollX
            scrollWithAnimation
          >
            {leagues.map((item, i) => {
              return (
                <View
                  key={i}
                  className=" inline-flex w-20 mr-3 h-20 bg-white rounded-md  justify-center items-center"
                >
                  <View className="text-xs text-gray-600 px-2">
                    {item.league_cn_name}
                  </View>
                </View>
              );
            })}
          </ScrollView>
        </View>
      </View>
    </View>
  );
}
